<template>
  <div ref="table">
    <el-table
      border
      stripe
      :data="tableData"
      :show-summary="isShowSummary"
      :height="tableHeigth ? tableHeigth : null"
      :header-cell-style="{ background: headerBgColor }"
      ref="multipleTable"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="isShowSelection"
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        v-if="isShowSerialNumber"
        type="index"
        align="center"
        label="序号"
        min-width="50"
      ></el-table-column>
      <template v-for="item in props">
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :sortable="item.sort || false"
          :show-overflow-tooltip="item.overflowHidden || false"
          :align="item.align || 'left'"
          :header-align="item.align || 'left'"
          :className="item.className"
          :key="item.index"
        >
          <slot :name="item.prop" slot-scope="scope" :data="scope.row">{{
            item.isFormatter === true
              ? formatter(item.prop, scope.row[item.prop])
              : scope.row[item.prop]
          }}</slot>
        </el-table-column>
      </template>
      <el-table-column
        v-if="isShowOperation"
        label="操作"
        align="center"
        :fixed="fixedType"
      >
        <slot name="operation" slot-scope="scope" :data="scope.row"></slot>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    // 表头背景色
    headerBgColor: {
      type: String,
      default: '#ffffff'
    },
    // 表格高度
    tableHeigth: {
      type: Number,
      default: 0
    },
    // 是否开启选择功能
    isShowSelection: {
      type: Boolean,
      default: false
    },
    // 是否显示序号
    isShowSerialNumber: {
      type: Boolean,
      default: false
    },
    // 是否显示操作列
    isShowOperation: {
      type: Boolean,
      default: false
    },
    // 是否显示总计
    isShowSummary: {
      type: Boolean,
      default: false
    },
    // 操作栏固定方式
    fixedType: {
      type: [String, Boolean],
      default: false
    },
    // 列字段名、列内容相关参数（详见https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes)
    props: {
      type: Array,
      default: () => [
        // {
        //   isFormatter:true, // 是否格式化内容，为true时需添加与prop同名的格式化function
        // }
      ]
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  computed: {
    // 匹配表格数据格式化方法
    formatter () {
      return (key, value) => {
        // 返回与key匹配的格式化function并执行、最终将返回格式后的内容
        if (this[key]) {
          return this[key](value)
        }
        // 否则返回原始值
        return value
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 根据业务需求、可将el-table的Table Events进行按需绑定（详见https://element.eleme.cn/#/zh-CN/component/table#table-events)
    // 当选择项发生变化时会触发该事件
    handleSelectionChange (row) {
      this.$emit('selectionChange', row)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
</style>
